<template>
  <div class="classify-product">
    <el-container>
      <el-aside class="classify-nav">
        <div>
          <ul>
            <li
              class="classify-item"
              v-for="item in productClassifyList"
              :key="item.id"
              @mouseenter="enterEvt(item.id, $event)"
              @mouseleave="leaveEvt"
            >
              <i class="el-icon-s-shop"></i>
              <span>{{ item.classifyName }}</span>
            </li>
          </ul>
        </div>
      </el-aside>
      <el-main class="carousel">
        <transition name="el-fade-in">
          <div
            class="classify-detail transition-box"
            v-show="isClassifyDeail"
            @mouseenter="enterDetailEvt"
            @mouseleave="leaveDetailEvt"
          >
            <ul>
              <li
                v-for="item in productList"
                class="product-item"
                :key="item.id"
              >
                <div class="pp">
                  <span class="un"
                    >{{ item.brandName }} <span class="d">></span>
                  </span>
                </div>
                <div class="procuct-nu">
                  <ul>
                    <!-- <li > -->
                      <router-link class="nav-li-item" v-for="product in item.products" :key="product.id" tag="li" :to="'/product/detail?shopid='+product.id">
                        {{ product.productName }}
                      </router-link>
                    <!-- </li> -->
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </transition>

        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in carouselList" :key="item.id">
              <img :src="item.url" style="background:center; width: 100%; height: 100%" alt="">
          </el-carousel-item>
        </el-carousel>
      </el-main>
    </el-container>
  </div>
</template>
<style lang="scss">
.classify-product {
  .el-carousel__container {
    height: 500px;
  }
}
</style>
<style lang="scss" scoped>
.classify-product {
  position: relative;

  .classify-nav {
    height: 500px;
    width: 250px !important;
    background-color: #ffffff;
    border-radius: 4px;

    .nav-li-item{
      max-width: 100px;
      overflow: hidden;
    }

    .classify-item:nth-child(1) {
      margin-top: 15px;
    }
    .classify-item {
      padding: 5px;
      padding-left: 20px;
      cursor: pointer;
    }
    .classify-item:hover {
      transition: all 0.3;
      background-color: rgb(248, 212, 178);
    }
  }
  ul {
    list-style-type: none;
  }

  .carousel {
    padding: 0px;
    margin-left: 10px;

    .classify-detail {
      position: absolute;
      z-index: 3;
      left: 250px;
      top: 0px;
      width: 600px;
      height: 500px;
      background-color: #ffffff;
      border-left: 1px solid rgb(248, 212, 178);
      .product-item {
        display: flex;

        .pp {
          // border: 1px solid red;
          min-width: 84px;
          min-height: 52px;
          // margin-top: 20px;
          text-align: center;
          color: #000;
          .un {
            display: block;
            margin-top: 12px;
          }
          .d {
            color: darkgray;
          }
        }
        .procuct-nu ul {
          overflow: hidden;
          // min-height: 52px;
          // border: 1px solid;
          padding: 10px 0;
          color: rgb(248, 162, 81);
          border-bottom: 1px dashed rgb(231, 228, 228);
          font-family: "Microsoft YaHei", SimSun, "\5b8b\4f53", sans-serif;
        }
        .procuct-nu li {
          padding: 2px;
          margin: 0px 10px;
          float: left;
        }
      }
    }
  }
}
</style>

<script>
import { getNavDataValue } from '../../api/home'
export default {
  data () {
    return {
      isClassifyDeail: false, // 是否显示导航详情
      isEvent: false, // 是否停留在导航详情
      element: null,
      productClassifyList: [],
      productList: [],
      carouselList: [
        {
          id: 1,
          url: 'https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg'
        },
        {
          id: 2,
          url: 'https://aecpm.alicdn.com/simba/img/TB1_JXrLVXXXXbZXVXXSutbFXXX.jpg'
        }
      ]
    }
  },
  mounted () {
    this.initProductClassifyLData()
  },
  methods: {
    // 初始化导航栏数据
    async initProductClassifyLData () {
      var res = await getNavDataValue()
      console.log(res)

      res.data.data.forEach((classify) => {
        var brands = []

        classify.homeBrands.forEach((brand) => {
          const products = []
          brand.homeCommities.forEach((item) => {
            products.push({
              id: item.commodityId,
              productName: item.productName.substr(0, 6)
            })
          })

          brands.push({
            id: brand.brandId,
            brandName: brand.brandName,
            products: products
          })
        })

        this.productClassifyList.push({
          id: classify.classId,
          classifyName: classify.className,
          brands: brands
        })
      })
      // for (let i = 0; i < 10; i++) {
      //   const length = parseInt(Math.ceil(Math.random() * 5) + 3);
      //   const brands = [];

      //   for (let j = 0; j < length; j++) {
      //     const length2 = parseInt(Math.ceil(Math.random() * 5) + 3);
      //     const products = [];
      //     for (let k = 0; k < length2; k++) {
      //       products.push({
      //         id: k + 1,
      //         productName: "商品" + (k + 1),
      //       });
      //     }
      //     brands.push({
      //       id: j + 1,
      //       brandName: "品牌" + (j + 1),
      //       products: products,
      //     });
      //   }

      //   this.productClassifyList.push({
      //     id: i + 1,
      //     classifyName: "品类" + (i + 1),
      //     brands: brands,
      //   });
      // }
    },
    // 鼠标移入,显示商品分类详情
    enterEvt (id, event) {
      console.log('移入', event)
      this.element = event.target

      const productClassify = this.productClassifyList.filter(
        (item) => item.id === id
      )
      this.productList = productClassify[0].brands
      this.isClassifyDeail = true
    },
    leaveEvt () {
      this.isClassifyDeail = false
    },
    enterDetailEvt (evt) {
      this.element.style.backgroundColor = 'rgb(248, 212, 178)'
      this.isClassifyDeail = true
      this.isEvent = true
      this.prominent = true
    },
    leaveDetailEvt (evt) {
      this.element.style.backgroundColor = ''
      this.isClassifyDeail = false
      this.isEvent = false
      this.prominent = false
    }
  }
}
</script>

<style>
</style>
